﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>主界面</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/jquery.min.js}"></script>
</head>
<body>
<div class="container-fluid" style="margin-top: 30px;text-align: center">
    <div class="row">
        <div class="col-md-12">
            <form class="form-inline">
                <div class="form-group">
                    <input type="hidden" name="id"/>
                    <input type="text" style="width: 300px;" class="form-control" name="name" placeholder="服务器名称">
                </div>
                <div class="form-group">
                    <input type="text" style="width: 300px;" class="form-control" name="url" placeholder="服务器地址">
                </div>
                <button type="button" class="btn btn-success" onclick="checkServer();">提交</button>
                <button type="button" id="delServer" style="display: none" class="btn btn-danger" onclick="toDel();">删除</button>
            </form>
        </div>
    </div>

    <div class="row" style="margin-top: 30px;">
        <div class="col-md-12">
            <div class="row" th:each="part:${result}">
                <div class="col-md-4" th:each="one:${part}">
                    <button class="btn btn-success btn-lg" th:text="${one.name}" th:ondblclick="'jump(\''+${one.id}+'\');'"
                            th:onclick="'toUpdate(\''+${one.id}+'\',\''+${one.name}+'\',\''+${one.url}+'\');'"></button>
                </div>
                <br/><br/><br/><br/><br/>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    var ctx = [[@{/}]];ctx = ctx.substr(0, ctx.length - 1);<!--获取项目根路径-->
    function jump(id){
        var temp = ctx + "/index2?id="+id;
        window.location = temp;
    }
    function checkServer(){
        var url = $("input[name='url']").val();
        $.ajax({
            url:url+"/meng/tree/check?callback=?",
            dataType:"jsonp",
            async:false,
            jsonpCallback:"test",
            success:function(data){
                if (data){
                    var name = $("input[name='name']").val();
                    if ($.trim(name)){
                        addServer(name,url);
                    }else {
                        alert("服务器名称为空！");
                    }
                }
            },
            error:function (XMLHttpRequest, textStatus, errorThrown){
                alert("服务器验证失败！");
            },
            complete: function(XMLHttpRequest, textStatus) {
                console.log(XMLHttpRequest);
            }
        });
    }

    function addServer(name,url){
        var id = $("input[name='id']").val();
        $.ajax({
            url:ctx+"/addServer",
            dataType:"text",
            async:false,
            data:{
                id:id,
                name:name,
                url:url
            },
            success:function(data){
                if (data){
                    alert("提交成功！");
                    window.location = window.location;
                }else {
                    alert("系统异常，添加服务器配置失败！");
                }
            },
            error:function (XMLHttpRequest, textStatus, errorThrown){
                alert("系统异常，添加服务器配置失败！");
            }
        });
    }

    function toUpdate(id,name,url){
        $("input[name='id']").val(id);
        $("input[name='name']").val(name);
        $("input[name='url']").val(url);
        $("#delServer").show(500);
    }

    function toDel(){
        var id = $("input[name='id']").val();
        $.ajax({
            url:ctx+"/delServer",
            dataType:"text",
            async:false,
            data:{
                id:id
            },
            success:function(data){
                if (data){
                    alert("删除成功！");
                    window.location = window.location;
                }else {
                    alert("系统异常，删除服务器配置失败！");
                }
            },
            error:function (XMLHttpRequest, textStatus, errorThrown){
                alert("系统异常，删除服务器配置失败！");
            }
        });
    }
</script>
</body>
</html>





























